<template>
  <div class="main">
    <el-card class="box-card">
      <div class="card-header">
        <img class="platform-logo" src="@/assets/imgs/reading.png" />
        <div class="platform-info">
          <h1 class="platform-name">阅读创作平台</h1>
          <p class="platform-slogan">开启您的数字阅读之旅</p>
        </div>
      </div>
      <!-- 用户名输入框 -->
      <div class="custom-input-wrapper">
        <input
          v-model="username"
          class="custom-input"
          :class="{ 'invalid-input': !isUsernameValid }"
          type="text"
          placeholder="设置用户名（2-20位）"
          @input="validations.username"
          @blur="validations.username"
        />
      </div>
      <div v-if="!isUsernameValid" class="error-tip">用户名长度2-20位</div>

      <!-- 邮箱输入框 -->

      <div class="custom-input-wrapper">
        <input
          v-model="mail"
          class="custom-input"
          :class="{ 'invalid-input': !isEmailValid }"
          type="email"
          placeholder="支持：gmail/qq/163/outlook/hotmail"
          @input="validations.email"
          @blur="validations.email"
        />
      </div>
      <div v-if="!isEmailValid" class="error-tip">邮箱格式不合法</div>

      <!-- 密码输入框 -->

      <div class="custom-input-wrapper">
        <input
          v-model="password"
          class="custom-input"
          :class="{ 'invalid-input': !isPasswordValid }"
          type="password"
          placeholder="密码需包含字母+数字（6-20位）"
          @input="validations.password"
          @blur="validations.password"
        />
      </div>
      <div v-if="!isPasswordValid" class="error-tip">需包含字母和数字</div>

      <!-- 确认密码输入框 -->

      <div class="custom-input-wrapper">
        <input
          v-model="confirmPassword"
          class="custom-input"
          :class="{ 'invalid-input': !isConfirmValid }"
          type="password"
          placeholder="再次输入密码"
          @input="validations.confirm"
          @blur="validations.confirm"
        />
      </div>
      <div v-if="!isConfirmValid" class="error-tip">密码不一致</div>

      <!-- 性别选择 -->
      <div class="gender-selection">
        <div
          class="gender-option"
          :class="{ selected: sex === 1 }"
          @click="selectSex(1)"
        >
          <img :src="MaleImg" alt="男性" />
          <div class="gender-label">男性</div>
        </div>
        <div
          class="gender-option"
          :class="{ selected: sex === 2 }"
          @click="selectSex(2)"
        >
          <img :src="FemaleImg" alt="女性" />
          <div class="gender-label">女性</div>
        </div>
      </div>
      <div v-if="!isSexValid" class="error-tip">请选择性别</div>

      <!-- 提交按钮增加禁用状态 -->
      <div class="btn-group">
        <button @click="handleRegister" class="submit-btn">提交注册</button>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ref, computed } from 'vue'
import { register } from '@/apis/user'
import { ElMessage } from 'element-plus'
import MaleImg from '@/assets/imgs/Male.png'
import FemaleImg from '@/assets/imgs/Female.png'

const router = useRouter()

// 响应式数据
const username = ref('')
const mail = ref('')
const password = ref('')
const confirmPassword = ref('')
// 在现有响应式数据中添加
const sex = ref(null)
const isSexValid = ref(true)

// 性别选择方法
const selectSex = (value) => {
  sex.value = value
  isSexValid.value = true
}

// 验证状态
const isEmailValid = ref(true)
const isUsernameValid = ref(true)
const isPasswordValid = ref(true)
const isConfirmValid = ref(true)

// 密码强度正则（至少包含字母和数字，6-20位）
const PASSWORD_REGEX = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,20}$/

// 实时验证函数
const validations = {
  username: () => {
    isUsernameValid.value =
      username.value.length >= 2 && username.value.length <= 20
  },
  email: () => {
    const emailRegex = /^[^\s@]+@(gmail|qq|163|outlook|hotmail)\.com$/
    isEmailValid.value = emailRegex.test(mail.value)
  },
  password: () => {
    isPasswordValid.value = PASSWORD_REGEX.test(password.value)
    if (confirmPassword.value) {
      isConfirmValid.value = password.value === confirmPassword.value
    }
  },
  confirm: () => {
    isConfirmValid.value = password.value === confirmPassword.value
  },
}

// 提交时综合验证
const isFormValid = computed(() => {
  return (
    isUsernameValid.value &&
    isEmailValid.value &&
    isPasswordValid.value &&
    isConfirmValid.value
  )
})

const handleRegister = async () => {
  if (!sex.value) {
    isSexValid.value = false
    ElMessage.error('请选择性别')
    return
  }
  if (!isFormValid.value) {
    ElMessage.error('请检查输入内容是否符合要求')
    return
  }

  const payload = {
    username: username.value,
    mail: mail.value,
    password: password.value,
    sex: sex.value,
  }

  try {
    const res = await register(payload)
    if (res.code === '200') {
      ElMessage.success('注册成功')
      router.push('/login')
    } else {
      ElMessage.error(res.message || '注册失败')
    }
  } catch (err) {
    ElMessage.error('服务器异常，请稍后重试')
  }
}
</script>
<style scoped>
.custom-input-wrapper {
  width: 100%;
  margin-top: 15px;
}

.custom-input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
  font-size: 16px;
  color: #333;
  transition: border-color 0.3s ease-in-out;
}

.custom-input:focus {
  outline: none;
  border-color: #6c63ff;
}

.invalid-input {
  border-color: #f44336;
}

.error-tip {
  color: #f44336;
  font-size: 12px;
  margin-bottom: 5px;
}

.submit-btn {
  padding: 10px 20px;
  background-color: #6c63ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.submit-btn:hover {
  background-color: #5a53e6;
}

.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
  background: url('@/assets/imgs/backgroud.jpg') no-repeat center center fixed;
  background-size: cover;
  margin: 0;
}

.box-card {
  width: 450px; /* 限制卡片的最大宽度 */
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-group {
  text-align: center;
  margin-top: 30px;
}
.gender-selection {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
}

.gender-option {
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.gender-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.gender-option.selected {
  border-color: #6c63ff;
  background-color: rgba(108, 99, 255, 0.05);
}

.gender-option img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  margin-bottom: 8px;
}

.gender-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}
/* 新增头部样式 */
.card-header {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* 左对齐 */
  gap: 15px; /* 元素间距 */
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  margin-bottom: 25px;
}

.platform-logo {
  height: 60px;
  width: 60px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.platform-info {
  display: flex;
  flex-direction: column;
}

.platform-name {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  letter-spacing: 1px;
  background: linear-gradient(135deg, #409eff 30%, #2c3e50 70%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.platform-slogan {
  margin: 4px 0 0;
  font-size: 14px;
  color: #909399;
  font-style: italic;
}

/* 调整卡片宽度 */
.box-card {
  width: 480px;
  overflow: hidden;
}

/* 调整输入框上方间距 */
.custom-input-wrapper {
  margin-top: 20px;
}
</style>
